<div class="max-w-2xl truncate mb-9 font-semibold text-xl leading-[30px] text-gray-900">
  {{ 'PAC.Xpert.CreateXpertFromTemplate' | translate: {
    Default: 'Create a digital expert from template ' + originName,
    value: originName
  } }}
</div>

<div class="mb-9 relative">
  <div class="pt-2">
    <div class="py-2 text-sm font-medium leading-[20px] text-gray-900">
      {{ 'PAC.KEY_WORDS.Workspace' | translate: {Default: 'Workspace'} }}
    </div>
    <ngm-select [selectOptions]="workspaceOptions()"
      [placeholder]="'PAC.Xpert.SelectAWorkspace' | translate: {Default: 'Select a workspace'}"
      [(ngModel)]="workspace"
    />

    <a [routerLink]="['/xpert/w']" routerLinkActive="router-link-active" target="_blank" rel="noopener noreferrer" class="inline-flex items-center p-1 text-xs !text-primary-400 hover:!text-primary-600">
      {{'PAC.Xpert.HowtoCreate' | translate: {Default: 'How to create'} }}
      <i class="ri-external-link-line"></i>
    </a>
  </div>

  <xpert-basic-form #basicForm [(name)]="name" [(avatar)]="avatar" [(description)]="description" />

  @if (loading()) {
    <ngm-spin class="absolute top-0 left-0 w-full h-full"></ngm-spin>
  }
</div>

<div class="flex flex-row-reverse">
  <button type="button" class="btn disabled:btn-disabled btn-primary btn-large justify-center w-24 ml-2"
    [disabled]="basicForm.invalid() || loading()"
    (click)="create()"
  >{{ 'PAC.Xpert.Create' | translate: {Default: 'Create'} }}</button>
  <button type="button" class="btn disabled:btn-disabled btn-secondary btn-large justify-center w-24"
    [disabled]="loading()"
    (click)="close()"
  >{{ 'PAC.Xpert.Cancel' | translate: {Default: 'Cancel'} }}</button>
</div>
